<template>
  <div class="welcome-container">
    <div class="welcome-card">
      <div class="welcome-icon">
        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m149.162667 222.208l-1.536 2.56-147.626667 268.373334-149.162667-268.373334a21.333333 21.333333 0 0 0-35.84-1.28l-1.28 2.133334-85.333333 170.666666a21.333333 21.333333 0 0 0 8.96 28.8l2.346667 1.066667a21.333333 21.333333 0 0 0 28.8-8.96l1.066666-2.346667 67.84-135.68 149.162667 268.373334a21.333333 21.333333 0 0 0 35.84 1.28l1.28-2.133334 147.626667-268.373333 67.84 135.68a21.333333 21.333333 0 0 0 38.4 1.28l1.28-2.346667a21.333333 21.333333 0 0 0-8.96-28.8l-2.346667-1.066667-85.333333-170.666666a21.333333 21.333333 0 0 0-32.128-1.536z"
            fill="currentColor"
          />
        </svg>
      </div>
      <h1>欢迎使用地质灾害信息系统</h1>
      <p class="welcome-role">
        当前角色: <span>{{ userRole }}</span>
      </p>
      <p class="welcome-desc">本系统用户灾情查看、上报和灾情数据分析，请通过左侧菜单栏选择功能模块</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const userRole = computed(() => {
  return userStore.role === 'admin' ? '管理员' : '普通用户'
})
</script>

<style lang="scss" scoped>
.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.welcome-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 40px;
  text-align: center;
  max-width: 600px;
  width: 100%;
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  .icon {
    width: 80px;
    height: 80px;
    color: #409eff;
  }
}

h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
  font-weight: 500;
}

.welcome-role {
  font-size: 16px;
  color: #606266;
  margin-bottom: 15px;

  span {
    font-weight: 600;
    color: #409eff;
  }
}

.welcome-desc {
  font-size: 14px;
  color: #909399;
  line-height: 1.6;
}
</style>
